<ScrollView sdkExampleTitle sdkToggleNavButton>
    <FlexboxLayout flexDirection="column">
        <!-- flexWrap: wrap; alignContent: flex-start -->
        <Label text="wrap" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"></Label>
        <!-- >> flexbox-wrap-html -->
        <FlexboxLayout flexWrap="wrap" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
            <Label class="h3 p-15" text="Gihub issue labels:"></Label>
            <!-- Use flexWrapBefore to control explicit line wrapping -->
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <!-- Use flexWrapBefore to control explicit line wrapping -->
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"></Label>
        </FlexboxLayout>
        <!-- << flexbox-wrap-html -->

        <!-- >> flexbox-wrap-reverse-html -->
        <!-- flexWrap: wrap-reverse; alignContent: flex-start -->
        <Label text="wrap-reverse" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"></Label>
        <FlexboxLayout flexWrap="wrap-reverse" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
            <Label class="h3 p-15" text="Gihub issue labels:"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"></Label>
        </FlexboxLayout>
        <!-- << flexbox-wrap-reverse-html -->

        <!-- >> flexbox-justify-end-html -->
        <!-- justifyContent: flex-end; flexWrap: wrap  -->
        <Label text="justifyContent: flex-end" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"></Label>
        <FlexboxLayout flexWrap="wrap" justifyContent="flex-end" class="p-15" backgroundColor="lightgray">
            <Label class="h3 p-15" text="Gihub issue labels:"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"></Label>
        </FlexboxLayout>
        <!-- << flexbox-justify-end-html -->

        <!-- >> flexbox-justify-center-html -->
        <!-- justifyContent: center; flexWrap: wrap  -->
        <Label text="justifyContent: center" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"></Label>
        <FlexboxLayout flexWrap="wrap" justifyContent="center" class="p-15" backgroundColor="lightgray">
            <Label class="h3 p-15" text="Gihub issue labels:"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"></Label>
        </FlexboxLayout>
        <!-- << flexbox-justify-center-html -->

        <!-- >> flexbox-justify-space-between-html -->
        <!-- justifyContent: space-between; flexWrap: wrap  -->
        <Label text="justifyContent: space-between" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"></Label>
        <FlexboxLayout flexWrap="wrap" justifyContent="space-between" class="p-15" backgroundColor="lightgray">
            <Label class="h3 p-15" text="Gihub issue labels:"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"></Label>
        </FlexboxLayout>
        <!-- << flexbox-justify-space-between-html -->

        <!-- >> flexbox-justify-space-around-html -->
        <!-- justifyContent: space-around; flexWrap: wrap -->
        <Label text="justifyContent: space-around" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"></Label>
        <FlexboxLayout flexWrap="wrap" justifyContent="space-around" class="p-15" backgroundColor="lightgray">
            <Label class="h3 p-15" text="Gihub issue labels:"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"></Label>
        </FlexboxLayout>
        <!--<< flexbox-justify-space-around-html -->

        <!-- >> flexbox-multiple-settings-html -->
        <!-- flexDirection; column; flexWrap: wrap-reverse; alignContent: flex-start + items w/ alignSelf options -->
        <Label text="flexDirection; column; flexWrap: wrap-reverse; alignContent: flex-start + items w/ alignSelf options" class="h4 p-t-15 p-l-15 p-r-15"
            textWrap="true"></Label>
        <FlexboxLayout flexDirection="column" flexWrap="nowrap" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
            <Label class="h3 p-15" text="Gihub issue labels:"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822" color="white"></Label>
            <Label alignSelf="auto" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green"
                color="white"></Label>
            <Label alignSelf="center" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label alignSelf="stretch" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label alignSelf="flex-end" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green"
                color="white"></Label>
            <Label alignSelf="flex-start" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"></Label>
            <Label alignSelf="baseline" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
                color="white"></Label>
            <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"></Label>
        </FlexboxLayout>
        <!-- << flexbox-multiple-settings-html -->
    </FlexboxLayout>

</ScrollView>